<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="pageData.pageCurrent"
    :page-sizes="[1, 2, 3, 4, 5]"
    :page-size="pageData.pageSie"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    background
  >
  </el-pagination>
</template>

<script lang="ts">
import { defineComponent, reactive, watchEffect } from 'vue'
import { useStore } from '@/store'

export default defineComponent({
  props: {
    total: {
      type: Number,
      required: true
    },
    dispatchName: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const store = useStore()
    const pageData = reactive({
      pageCurrent: 1,
      pageSie: 5
    })
    const handleSizeChange = (val: number) => {
      pageData.pageSie = val
    };
    const handleCurrentChange = (val: number) => {
      pageData.pageCurrent = val
    };
    watchEffect(() => {
      store.dispatch(props.dispatchName, { pageNum: pageData.pageCurrent, pageSize: pageData.pageSie })
    })
    return { handleSizeChange, handleCurrentChange, pageData }
  },
})
</script>
